<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>

<body>
      <script>
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "./weather.php?city=广州");
            xhr.send();
            xhr.onreadystatechange = function () {
                  if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
                        console.log(JSON.parse(xhr.responseText));
                        if (!xhr.responseText.console.error_code) {
                              var data = (JSON.parse(xhr.responseText)).result.data;
                              console.log(data)
                              document.querySelector(".box").innerHTML += `
                              <li>
                                    <p>日期：${data.pm25.dataTime}</p>
                                    <p>城市：${data.pm25.key}</p>
                                    <p>空气质量：${data.pm25.pm25.quality}</p>
                                    <p>风力:${data.realtime.wind.power} 风向:${data.realtime.wind.direct}</p>
                                    <p>小贴士:</p>
                                    <ul>`+inul(data.life.info)+`</ul>
                              </li>
                          `
                        }else{
                              alert("查询错误")
                        }
                  }
            }
            function inul(tips){
                  var res= ""
                  for(let i in tips){
                        res +="<li>"
                        tips[i].forEach((item,index)=>{
                              res+=item
                        })
                        res+="</li>"
                  }
                  return res
            }
      </script>
</body>

</html>